<div class="jumbotron">
  <div class="row">
    <div class="col-md-6">
      <h1>Malina (keyed)</h1>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="run" @click={run}>Create 1,000 rows</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="runlots" @click={runLots}>Create 10,000 rows</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="add" @click={add}>Append 1,000 rows</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="update" @click={partialUpdate}>Update every 10th row</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="clear" @click={clear}>Clear</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="swaprows" @click={swapRows}>Swap Rows</button>
        </div>
      </div>
    </div>
  </div>
</div>
<table class="table table-hover table-striped test-data">
  <tbody>
    {#each data as row, index (row)}
      <tr class={row === selected ? 'danger' : ''}>
        <td class="col-md-1">{=row.id}</td>
        <td class="col-md-4">
          <a @click|root={selected=row}>{row.label}</a>
        </td>
        <td class="col-md-1">
          <a @click|root={remove(index)}>
            <span class="glyphicon glyphicon-remove" aria-hidden="true" />
          </a>
        </td>
        <td class="col-md-6" />
      </tr>
    {/each}
  </tbody>
</table>
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>

<script>
  import buildData from './data.js';

  let data = [], selected = null;

  const add = () => {data = data.concat(buildData(1000))};
  const clear = () => {
    data = [];
    selected = null;
  };
  const partialUpdate = () => {
    for (let i = 0, len = data.length; i < len; i += 10)
      data[i].label += ' !!!';
  };
  const remove = (index) => data.splice(index, 1);
  const run = () => {
    data = buildData(1000);
    selected = null;
  };
  const runLots = () => {
    data = buildData(10000);
    selected = null;
  };
  const swapRows = () => {
    const t = data[998];
    data[998] = data[1];
    data[1] = t;
  };
</script>
